<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>岚山一中一卡通</title>
    <link rel="stylesheet" href="/css/weui.min.css"/>
    <link rel="stylesheet" href="/css/myWxmp.css"/>
</head>
<body ontouchstart>

<div class="container" id="container">
    <div class="page js_show">
        <div class="page__hd">
            <h1 class="page__title">饭卡消费记录</h1>
        </div>
        <div class="page__bd">
            <div id="payListContent"></div>
            <div id="nextPageDiv" style="display: none">
                <a href="javascript:nextPage();" class="weui-btn weui-btn_default">加载更多</a>
            </div>
            <br/>
            <div class="weui-btn-area">
                <a href="recharge.html" class="weui-btn weui-btn_primary" id="begin_recharge">去充值</a>
            </div>
        </div>
        <div class="weui-msg__extra-area">
            <div class="weui-footer">
                <p class="weui-footer__text">Copyright &copy; 2018-2019</p>
            </div>
        </div>
    </div>

</div>


<script src="/js/zepto.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
<script type="text/javascript">
    var gPage;
    var gPageSize;
    function refreshList(pageIndex, pageSize) {
        gPage = pageIndex + 1;
        gPageSize = pageSize;
        $.ajax({
            url: '/wxpay/payRecord',
            type: 'POST',
            data: {
                page: pageIndex,
                pageSize: pageSize
            },
            dataType: 'json',
            success: function (result) {
                if (result.success && result.page && result.page.total > 0) {
                    var dataList = result.data;
                    console.log(dataList);
                    console.log(result.page);
                    $.each(dataList, function (index, data) {
                        $("#payListContent").append('<div class="weui-form-preview"><div class="weui-form-preview__hd"><div class="weui-form-preview__item"><label class="weui-form-preview__label">消费金额</label><em class="weui-form-preview__value">'+data.amount
                            +'元</em></div></div><div class="weui-form-preview__bd"><div class="weui-form-preview__item"><label class="weui-form-preview__label">时间</label><span class="weui-form-preview__value">'+data.payTime
                            +'</span></div><div class="weui-form-preview__item"><label class="weui-form-preview__label">状态</label><span class="weui-form-preview__value">'+data.payStatus
                            +'</span></div><div class="weui-form-preview__item"><label class="weui-form-preview__label">商品</label><span class="weui-form-preview__value">'+data.goodsName
                            +'</span></div></div></div><br/>');
                    });
                    if(result.page.page<result.page.totalPage){
                        $('#nextPageDiv').css('display', 'block');
                    }else {
                        $('#nextPageDiv').css('display', 'none');
                    }
                } else {
                    $("#payListContent").append('消费记录为空');
                }
            },
            error: function () {
                showFailure('获取消费记录异常，可能网络异常');
            }
        });
    }
    function nextPage(){
        refreshList(gPage, gPageSize);
    }
    function showFailure(msg){
        window.location.href='failure.html?failTip='+encodeURIComponent(msg);
    }
    refreshList(1, 5);
</script>
</body>
</html>
